<template>
  <el-card>
    <el-col :span="4">
      <div class="logo">
        <img src="../assets/logo.png" style="width:200px;" alt />
      </div>
    </el-col>

    <!-- <el-col :span="16">
      <div></div>
    </el-col> -->

    <el-col :span="20">
      <div
        class="login-btn"
        style="line-height: 100px;
    text-align: right; padding-right:20px; color:#fff;"
      >
        <span style="display:inline-block; padding-right:30px; color:#409EFF">{{area_name}}/{{school_name}}/{{user_name}}</span>
        <el-button
          type="primary"
          @click="logout"
          style="cursor:pointer; color:#f2f2f2; 
              font-size:14px;"
        >退出登录</el-button>
      </div>
    </el-col>
  </el-card>
</template>

<script>
import store from "../store";
import { mapMutations } from "vuex";
export default {
  name: "top",
  data() {
    return {
      user_name: store.state.UserName,
      school_name: store.state.SchoolName,
      area_name:store.state.AreaName,
    };
  },
  methods: {
    logout() {
      this.$cookie.delCookie("token");
      this.$cookie.delCookie("userid");
      this.$cookie.delCookie("is_superuser");
      this.$cookie.delCookie("school_id");
      this.changeName("");
      this.changeSchoolName("");
      store.state.token = "";
      setTimeout(() => {
        this.$router.push({ path: "/" });
      }, 200);
    },
    ...mapMutations(["changeName"]),
    ...mapMutations(["changeSchoolName"])
  }
};
</script>


<style scoped>

</style>